<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制定安全库存配置单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/plugin/iview/dist/styles/iview.css">

    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>

<div class="layuimini-container" id="app">
    <div class="layuimini-main">


        <!--数据表格-->
        <i-table
                border
                height="700px"
                :loading="loading"
                context-menu
                show-context-menu
                :columns="columns1" :data="data1">
            <template slot-scope="{ row, index }" slot="action">
                <i-button @click="developFn(row)" type="primary" icon="md-checkmark" size="small"
                          style="margin-right: 5px">
                    制 定
                </i-button>
            </template>
        </i-table>
        <!--数据表格-->

        <!--分页-->
        <Page
                style="margin-top: 10px"
                :current="page"
                :page-size="pageSize"
                show-elevator
                :total="total"
                show-total
                show-sizer></Page>
        <!--分页-->

        <!--抽屉-->
        <Drawer
                width="70%"
                title="安全库存配置单" :closable="false" v-model="drawerValue">
            <i-form style="text-align: center" inline label-position="left" :label-width="120">
                <Row :gutter="16">
                    <Col span="12">
                    <Form-item label="产品名称">
                        <i-input :disabled="true" v-model="developObj.productName"></i-input>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    <Form-item label="产品编号">
                        <i-input :disabled="true" v-model="developObj.productId"></i-input>
                    </Form-item>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                    <Form-item label="库存报警下限数">
                        <Input-number v-model="developObj.min_amount" style="width: 200px;"></Input-number>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    <Form-item label="库存报警上限数">
                        <Input-number v-model="developObj.max_amount" style="width: 200px;"></Input-number>
                    </Form-item>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="6">
                    <Form-item label="设计人">
                        <i-input :disabled="true" v-model="developObj.responsiblePerson"></i-input>
                    </Form-item>
                    </Col>
                    <Col span="6">

                    </Col>
                    <Col span="6">

                    </Col>
                    <Col span="6">

                    </Col>
                </Row>
            </i-form>

            <i-table border :columns="columns2" :data="data2">
                <template slot-scope="{ row, index }" slot="max_capacity_amount">
                    <i-input v-model="developObj.max_capacity_amount"></i-input>
                </template>
            </i-table>

            <i-form style="margin-top: 10px;text-align: center" label-position="left" :label-width="120">
                <Row :gutter="16">
                    <Col span="12">
                    <Form-item label="登记人">
                        <i-input v-model="developObj.register"></i-input>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                    <Form-item label="配置要求">
                        <i-input v-model="developObj.config" type="textarea" placeholder="请输入配置要求"></i-input>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    </Col>
                </Row>
            </i-form>

            <i-button type="primary" icon="md-checkmark" @click="addOrUpdate"> 提 交</i-button>
        </Drawer>
        <!--抽屉-->

    </div>
</div>

<!--jq-->
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../../lib/plugin/vue/vue.min.js"></script>
<script src="../../../lib/plugin/iview/dist/iview.min.js"></script>

<!--layui-->
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

<!--axios-->
<script src="../../../lib/plugin/axios/axios.min.js"></script>

<!--系统文件-->
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>
<script>
    let vue;
    let safeApi = 'http://127.0.0.1:8004/';

    // 入口函数
    $(function () {
        // http request 拦截器
        axios.interceptors.request.use(
            config => {
                if (token) { //判断token是否存在
                    config.headers.token = $.cookie("TOKEN");  //将token设置成请求头
                }
                return config;
            },
            err => {
                return Promise.reject(err);
            }
        );

        // 初始化Vue
        vue = new Vue({
            // 控制区域
            el: '#app',
            // 数据
            data: {
                loading: true,
                drawerValue: false,

                columns1: [
                    {
                        title: '产品编号',
                        align: 'center',
                        key: 'productId'
                    },
                    {
                        title: '产品名称',
                        align: 'center',
                        key: 'productName'
                    },
                    {
                        title: '用途类型',
                        align: 'center',
                        key: ''
                    },
                    {
                        title: '档次级别',
                        align: 'center',
                        key: 'productClass'
                    },
                    {
                        title: '1级分类',
                        align: 'center',
                        key: 'address'
                    },
                    {
                        title: '2级分类',
                        align: 'center',
                        key: 'address'
                    },
                    {
                        title: '3级分类',
                        align: 'center',
                        key: 'address'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        slot: 'action',
                        key: 'address'
                    }
                ],
                data1: [],

                page: 1,
                pageSize: 5,
                total: 9,

                columns2: [
                    {title: '序号', align: 'center', key: 'Safetid'},
                    {title: '库房名称', align: 'center', key: 'name'},
                    {title: '存储地址编号', align: 'center', key: 'addressId'},
                    {title: '存储地址名称', align: 'center', key: 'addressName'},
                    {title: '存储单元简称', align: 'center', key: 'address'},
                    {
                        title: '最大存储量',
                        align: 'center',
                        slot: 'max_capacity_amount'
                    },
                    {title: '存储单位', align: 'center', key: 'address'},
                ],
                data2: [
                    {Safetid: 1, name: '成品库', addressId: '01-01-01', addressName: '电子-计算机-服务器', max_capacity_amount: 0}
                ],

                developObj: {},
            },
            // 方法
            methods: {
                addOrUpdate() {
                    let obj = {
                        productName: this.developObj.productName,
                        productId: this.developObj.productId,
                        minAmount: this.developObj.min_amount,
                        maxAmount: this.developObj.max_amount,
                        maxCapacityAmount: this.developObj.max_capacity_amount,
                        register: this.developObj.register,
                        config: this.developObj.config,
                    }

                    axios.post(safeApi + 'warehouseStock/insertSecuritySheet', obj).then(res => {
                        if (res.data.success) {
                            this.$Message.success(res.data.message);
                        }

                        this.loadInventoryAllocationSheet();
                        this.drawerValue = false;

                    }).catch(err => {
                        this.$Message.error('对方不想说话，并且向你抛出了一个异常');
                    })
                },
                handleEdit(row) {
                    this.$set(row, '$isEdit', true)

                },
                handleSave(row) {
                    this.$set(row, '$isEdit', false)
                },
                developFn(row) {
                    this.developObj = row;


                    console.log(row);

                    this.drawerValue = true;
                },
                loadInventoryAllocationSheet() {
                    this.loading = true;
                    axios.get(safeApi + "warehouseStock/findPagecheck?page=" + this.page + "&limit=" + this.pageSize + "&checkTag=审核通过&inventoryStatus=0").then(res => {
                        this.data1 = res.data.data;
                        this.total = res.data.total;

                        this.loading = false;
                    }).catch(err => {
                        this.$Message.error('对方不想说话，并且向你抛出了一个异常');
                    });
                }
            },
            // 钩子函数
            mounted() {
                this.loadInventoryAllocationSheet();
            }
        })
    });
</script>
</body>
</html>
